<template>
  <div class="main">
      <div class="content">
        <el-row :gutter="10" class="checktitle">
          <el-col :span="16"><div class="grid-content bg-purple">
              <div class="checkBox">
                  <div class="checkDetail">
                   <span>存续期限:</span>
                    <el-radio-group v-model="radio1" size="small" fill="#cd9c54">
                      <el-radio-button label="不限"></el-radio-button>
                      <el-radio-button label="≤2年（含）以内"></el-radio-button>
                      <el-radio-button label="2-5年"></el-radio-button>
                      <el-radio-button label="5年以上"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="checkDetail">
                    <span>投资方向:</span>
                    <el-radio-group v-model="radio2" size="small" fill="#cd9c54">
                      <el-radio-button label="不限"></el-radio-button>
                      <el-radio-button label="Pro-IPO"></el-radio-button>
                      <el-radio-button label="PE/VC"></el-radio-button>
                      <el-radio-button label="新三板"></el-radio-button>
                      <el-radio-button label="FOF"></el-radio-button>
                      <el-radio-button label="其他"></el-radio-button>
                      
                    </el-radio-group>
                  </div>
                   <div class="checkDetail">
                    <span>产品状态:</span>
                    <el-radio-group v-model="radio3" size="small" fill="#cd9c54">
                      <el-radio-button label="不限"></el-radio-button>
                      <el-radio-button label="预售"></el-radio-button>
                      <el-radio-button label="在售"></el-radio-button>
                      <el-radio-button label="售罄"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="checkDetail checkDetailflex">
                    <span>已选条件:</span>
                    <div class="checkedbox">
                      <el-tag
                        type="info"
                        :key="tag"
                        v-for="tag in dynamicTags"
                        color="#fff"
                        :disable-transitions="true"
                        @close="handleClose(tag)">
                        {{tag}}
                      </el-tag>
                    </div>
                    <span class="chongzhi" @click="repetchange">重置条件</span>
                  </div>
                  <p class="allnumber">符合条件的共有{{productBox.length}}条</p>
              </div>  
            </div></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <contactus></contactus>
            </div>
          </el-col>
        </el-row>
      </div>
         <div class="productbox">
                  <div class="prodectdetail wow" v-for="(item,index) in productBox" :key="index" :class="{'slideInLeft':index%2 == 1,'slideInRight':index%2 == 0}">
                    <el-row>
                      <el-col :span="12">
                          <div class="productinfo">
                              <nuxt-link target="_blank" :to="'/product/'+ item.pid"><h1>{{item.name}}</h1></nuxt-link>
                              <h3>管理人:<span>{{item.publishEduinfo}}</span></h3>
                              <h3>项目亮点:<span>{{item.coreHighlights}}</span></h3>                              
                          </div>
                      </el-col>

                      <el-col :span="6">
                          <div class="productmsg">
                              <p>投资方向：{{item.investDirect}}</p>
                              <p>存续期限：{{item.productDeadlinecp}}</p>
                              <p>投资起点：{{item.beginMoney}}万</p>
                          </div>
                        </el-col>

                      <el-col :span="6">
                          <div class="productbutton">
                            <nuxt-link target="_blank" :to="'/product/'+ item.pid"><el-button class="detailbutton">查看详情</el-button></nuxt-link>
                            <el-button class="detailbutton">立即预约</el-button>                       
                          </div>
                        </el-col>
                    </el-row>
                </div>
              </div>

              <equityDetail3></equityDetail3>
              <equityDetail2 :newdata="newsDetail"></equityDetail2>
              <announcement :infodata="newsinfo" :newbox1="newlist1" :newbox2="newlist2" :newbox3="newlist3"></announcement>
              
  </div>
</template>


<script>
import asyncApi from "../../static/js/asyncApi.js";
import api from "../../static/js/api.js";
import contactus from "../../components/contactus";
import equityDetail3 from "../../components/equityDetail3";
import equityDetail2 from "../../components/equityDetail2";
import announcement from "../../components/announcement";


export default {
  data() {
    return {
      dynamicTags:[],
      radio1: "不限",
      radio2: "不限",
      radio3: "不限",
      postdata1: "",
      postdata2: "",
      postdata3: "",
      newsinfo:{
        title:"股权研究",
        msg1:"观宏观大势，把握市场发展趋势",
        msg2:"观财经实时热点，紧握当下投资机会，",
        msg21:"紧握当下投资机会",        
        msg3:"观市场变幻，把握最佳投资时机"        
      }
    };
  },
  methods: {
    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    gonewdetail(val) {
      this.$router.push("/post/" + val);
    },
    change(val1,val2,val3){
      if (val1 == "不限") {
        this.postdata1 = "";
      } else if (val1 == "≤2年（含）以内") {
        this.postdata1 = "1";
      } else if (val1 == "2-5年") {
        this.postdata1 = "2";
      } else if (val1 == "5年以上") {
        this.postdata1 = "3";
      }

      if (val2 == "不限") {
        this.postdata2 = "";
      } else {
        this.postdata2 = this.radio2;
      }

      if (val3 == "不限") {
        this.postdata3 = "";
      } else {
        this.postdata3 = this.radio3;
      }

      this.getprobuct();

    },
    change1(val) {
      if (val == "不限") {
        this.postdata1 = "";
      } else if (val == "≤2年（含）以内") {
        this.postdata1 = "1";
      } else if (val == "2-5年") {
        this.postdata1 = "2";
      } else if (val == "5年以上") {
        this.postdata1 = "3";
      }
      this.getprobuct();
    },
    change2(val) {
      if (val == "不限") {
        this.postdata2 = "";
      } else {
        this.postdata2 = this.radio2;
      }
      this.getprobuct();
    },
    change3(val) {
      if (val == "不限") {
        this.postdata3 = "";
      } else {
        this.postdata3 = this.radio3;
      }
      this.getprobuct();
    },
    getprobuct() {
      api
        .getProduct({
          categoryName: "私募股权",
          productDeadline: this.postdata1,
          investDirection: this.postdata2,
          productStatus: this.postdata3
        })
        .then(res => {
          this.productBox = res.data.list;
        });
    },
    repetchange(){
      this.radio1 = "不限";
      this.radio2 = "不限";
      this.radio3 = "不限";
    }
  },
  components:{
    contactus,
    equityDetail3,
    equityDetail2,
    announcement
  },
  async asyncData() {
    let [data1, data2, data3] = await Promise.all([
      asyncApi.asyncgetProduct({ categoryName: "私募股权" }),
      asyncApi.asyncGetCategoryPost({categoryName: "投资策略",page: "1",pageSize: "12"}),
      asyncApi.asyncGetCategoryPost({categoryName:"私募股权",page: "1",pageSize: "15"})
    ])
    return {
      productBox: data1.data.data.list,
      newsDetail: data2.data.data.list,
      newlist1:data3.data.data.list.slice(0,5),
      newlist2:data3.data.data.list.slice(5,10),
      newlist3:data3.data.data.list.slice(10,15),
    };
  },
  computed:{
    allPanelShow() {
      this.radio1;
      this.radio2;
      this.radio3;
      return Date.now()
  　}
  },
  watch:{
     allPanelShow() {
       if (this.radio1 || this.radio2 || this.radio3) {
                this.dynamicTags = []
              if (this.radio1 != "不限") {
                 this.dynamicTags.push(this.radio1)
              }
              if(this.radio2 != "不限"){
                this.dynamicTags.push(this.radio2)
              }
              if(this.radio3 != "不限"){
                this.dynamicTags.push(this.radio3)
              }
            this.change(this.radio1,this.radio2,this.radio3)
       }
     }
  },
  head () {
    return {
      title: "私募股权_股权产品_股权投资产品_最新股权投资基金_2018股权投资基金_私募股权投资基金_私募股权基金_股权投资基金_私募股权投资_股权投资-理财产品-天沁财富",
      meta: [
         { hid:"keywords",name: 'keywords', content: '私募股权,私募股权基金,私募股权投资,股权投资基金,股权投资,私募股权投资基金,股权投资产品,最新股权投资基金,2018股权投资基金' },
         { hid:"description",name: 'description', content: '天沁财富私募股权产品中心为私募股权投资者提供最优的私募股权,私募股权基金,私募股权投资产品，股权投资基金，帮助股权投资者挑选最适合投资者财富增值需求的股权投资基金。' }
      ]
    }
  }
};
</script>

<style scoped>
.productmsg{
      border-right: 1px solid #dddddd;
      height: 120px;
}
.productmsg p{  
  font-size: 16px;
  color: #333;
  padding-left: 20px;
  margin-top: 25px;
}

.checktitle{
  padding-bottom: 20px;
}
.checkDetailflex{
  display: flex;
}
.checkedbox{
  display: inline-block;
  width: 450px;
}
.allnumber{
  font-size: 14px;
  text-align: right;
  color: #333;
  margin-top: 20px;
}
.checkDetail .chongzhi{
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: white;
  background: #b41d24;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  
}
.newBoxDetali {
  height: 140px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.newimg {
  width: 40%;
  height: 100px;
  float: left;
  margin-top: 10px;
}
.newinfo {
  width: 60%;
  float: left;
  padding: 0 10px;
  margin-top: 10px;
}
.newinfo a {
  display: inline-block;
  width: 210px;
  overflow: hidden;
  text-overflow: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.5;
  color: #333;
}
.newcontent {
  text-indent: 2rem;
  overflow: hidden;
  text-overflow: none;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  color: #555557;
}
.newimg img {
  width: 100%;
  height: 100%;
}
.detailbutton {
  background: #cd9c54;
  color: white;
  display: block;
  margin: 20px auto;
}
.newsBox {
  margin-top: 20px;
}
.newsBox h1 {
  color: black !important;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.newsBox h1 a {
  font-size: 12px;
}
.productinfo {
  height: 120px;
  border-right: 1px solid #dddddd;
}
.productinfo h1 {
  margin: 20px 0 0 20px;
  color: #555557;
  font-size: 22px;
  font-weight: bolder;
}
.productinfo h1:hover{
  color: #cd9c54;
}
.productinfo h3 {
  margin: 20px;
  font-size: 16px;
  color: #333;
}
.prodectdetail {
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
  transition: all 1s;
  margin-bottom: 10px;
}
.prodectdetail:hover {
  box-shadow:  0 0 10px #ccc;
  padding-left: 100px;
}

.main {
  background: #f1f1f1;
  width: 1200px;
  margin: 10px auto;
}
.main h1 {
  font-size: 20px;
  line-height: 30px;
}
.checkBox {
   background: white;
  height: 313px;
  padding: 24px;
  overflow: hidden;
  box-sizing: border-box;
}
.checkDetail {
  margin-top: 20px;
}
.checkDetail span {
  padding-right: 5px;
  color: black;
  font-size: 16px;
  line-height: 26px;
  margin-right: 20px;
}
.checkDetail .checkedbox span{
  display: inline-block;
  font-size: 12px;
  height: 26px;
  line-height: 26px;
  padding: 0 10px;
}
</style>
